﻿@model IEnumerable<TouristGuide.Models.Country>

@{
    ViewBag.Title = "Map";
}
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
<script type="text/javascript">
    $(document).ready(function () {
        GetMap();
        //call the action created to retrieve the data
        $.post("/Home/GetCountriesWithCoordinates", null, function (data) {
            //iterate through the 'data' retireved
            $.each(data, function (item, location) {
                AddLocationPin(location.Latitude, location.Longitude, location.Title, location.Description);
            });
        });
    });
    var map = null;
    function GetMap() {
        map = new VEMap('myMap');
        map.LoadMap(new VELatLong(40.0, -30.0), 2, 'Road', false);
    }
    function AddLocationPin(latitude, longitude, title, description) {      
        //create new pushpin shape      
        shape = new VEShape(VEShapeType.Pushpin, new VELatLong(latitude, longitude));      
        //set title for info box      
        shape.SetTitle(title);      
        //set html for info box      
        shape.SetDescription(description);      
        //add pin      
        map.AddShape(shape);  
    }

</script>

<div id='myMap' style="position: relative; margin: -10px; width: 600px; height: 400px;">
</div>
